<template>
	<view class="container">
		<!-- <u-navbar 
			:title="title" 
			:customBack="onClickBack" 
		></u-navbar> -->
		<com-head textTit="待消费" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="content">
			<view class="content-header">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good.png" mode=""></image>
				<view class="tag">购买成功</view>
			</view>
			<view class="content-dec">您的订单已生成，请尽快到店核销哦~</view>
			
			<view class="contentBox">
				<view class="goods" v-if="orderType == 2" v-for="item in oderlist.project" @click="toProject(item)">
					<image :src="item.project_images" mode="aspectFill"></image>
					<view>
						<view class="t1">
							{{item.project_name}}
						</view>
						<view class="tt">
							<view v-for="row in item.project.tags">{{row}}</view>
						</view>
						<view class="t2">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
							{{item.project.duration}}分钟
						</view>
						<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>{{item.number}}</view>
						<view class="price">
							<text v-if="is_singles == 0"><text class="text">¥</text>{{item.project.price}}</text>
							<text v-else><text class="text">¥</text>{{item.project.single_price}}</text>
						</view>
					</view>
				</view>
				<view class="goods" v-if="orderType == 1" v-for="item in oderlist.goods" @click="toShop(item)">
					<image :src="item.goods_images" mode="aspectFill"></image>
					<view>
						<view class="t1">
							{{item.goods_name}}
						</view>
						<view class="tt">
							<view>{{item.sku_text}}</view>
						</view>
						<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>{{item.number}}</view>
						<view class="price">
							<text><text class="text">¥</text>{{item.sale_price}}</text>
						</view>
					</view>
				</view>
				
				<view class="qr">
					<image :src="oderlist.check_code" mode="aspectFill"></image>
					
					<view class="qr-dec">券码：{{oderlist.out_trade_no || '-'}}  <u-icon @click="copyText(oderlist.out_trade_no)" class="attach" name="attach" color="#333333" size="28"></u-icon></view>
					
				</view>
			</view>
			
			<view class="plsTitle" v-if="orderType == 2"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约信息</view>
			<view class="groupList" v-if="orderType == 2">
				<view class="list">
					<text class="tit">预约门店</text>
					<text>{{oderlist.store.title || '-'}}</text>
				</view>
				<view class="list">
					<text class="tit">预约人数</text>
					<text>{{oderlist.user_num || '-'}}人</text>
				</view>
				<view class="list">
					<text class="tit">预约时间</text>
					<text>{{oderlist.update_time || '-'}}</text>
				</view>
				<view class="list">
					<text class="tit">指定技师</text>
					<text v-if="oderlist.tech[0].staff.name">{{oderlist.tech[0].staff.name || '-'}}（{{oderlist.tech[0].staff.number || '-'}}）</text>
					<text v-else>-</text>
				</view>
				<view class="list">
					<text class="tit">联系人</text>
					<text>{{oderlist.user.realname || '-'}}</text>
				</view>
				<view class="list">
					<text class="tit">手机号</text>
					<text>{{oderlist.user.phone || '-'}}</text>
				</view>
				
			</view>
		
		</view>
		
		<view class="sure" @click="shareFun">分享好友</view>
		
		<!-- 二维码弹窗 -->
		<u-popup v-model="showPopup" safe-area-inset-bottom mode="center" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}" border-radius="40" @close="close">
			<view class="popBox">
				<view class="popBox-bg">
					<view v-if="orderType == 2" class="popBox-bg-staff">
						<image :src="oderlist.project[0].staff.avatar"></image>
						<view class="popBox-bg-staff-view">
							<view class="title">{{oderlist.project[0].staff.name}}</view>
							<view class="dec">{{oderlist.project[0].staff.phone}}</view>
						</view>
					</view>
					<view v-if="orderType == 2" class="popBox-bg-time">预约时间：{{oderlist.reservation_date}}  {{oderlist.reservation_time}}</view>
					
					<view class="goods-box">
						<view class="goods" v-if="orderType == 2">
							<image :src="oderlist.project[0].project_images || ''" mode="aspectFill"></image>
							<view>
								<view class="t1">
									{{oderlist.project[0].project_name}}
								</view>
								<view class="tt">
									<view v-for="row in oderlist.project[0].project.tags">{{row}}</view>
								</view>
								<view class="t2">
									<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
									{{oderlist.project[0].project.duration}}分钟
								</view>
								<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>{{oderlist.project[0].number}}</view>
								<view class="price">
									<text><text class="text">¥</text>{{oderlist.project[0].project.price}}</text>
								</view>
							</view>
						</view>
						<view class="goods" v-if="orderType == 1">
							<image :src="oderlist.goods[0].goods_images || ''" mode="aspectFill"></image>
							<view>
								<view class="t1">
									{{oderlist.goods[0].goods_name}}
								</view>
								<view class="tt">
									<view>{{oderlist.goods[0].sku_text}}</view>
								</view>
								<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>{{oderlist.goods[0].number}}</view>
								<view class="price">
									<text><text class="text">¥</text>{{oderlist.goods[0].sale_price}}</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="goods-store">
						<view class="goods-store-view">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dianpu23.png"></image>
							<view class="main">
								<view class="main-title">{{oderlist.store.title}}</view>
								<view class="main-dec">预约门店</view>
							</view>
						</view>
						<view class="goods-store-view" v-if="orderType == 2">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/yuaqgong.png"></image>
							<view class="main">
								<view class="main-title">{{oderlist.project[0].staff.name}}</view>
								<view class="main-dec">技师</view>
							</view>
						</view>
					</view>
					
					<view class="popBox-bg-box">
						<view class="popBox-bg-box-left">
							<view class="title">Hey~</view>
							<view class="dec">扫描二维码查看哦！</view>
						</view>
						<view class="popBox-bg-box-right">
							<image :src="QRImg"></image>
						</view>
					</view>
				</view>
				
				
			
				<view class="shareF">
					<image class="shareF-title" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/fenxiangzhi.png"></image>
					<view class="shareF-view">
						<view @click.native="downloadFile()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bendi.png"></image>
						</view>
						<view>
							<button open-type='share' class="sharebtn" >
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weixin.png"></image>
							</button>
						</view>
						<view @click.native="guideToTimelineShare()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/pengyou.png"></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title:'',
				type:1,
				order_id:'',
				types:'',
				oderlist: [],
				showPopup: false,
				scrollTop: 0,
				orderType: 0,
				QRImg: '',
				is_singles: 0
			}
		},
		//分享到朋友圈
		onShareTimeline: function (res) {
			that.setUserShare()
			var that = this;
			let peoject_id=that.oderlist.project[0].project_id;//获取产品id
			let goods_title=that.title;//获取产品标题
			return {
				title: goods_title,
				path: `/pages/shop/projectInfo?peoject_id=${peoject_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_project_id=${peoject_id}`,
			}
		},
		onShareAppMessage: function (res) {
		    var that = this;
			that.setUserShare()
		    let peoject_id=that.oderlist.project[0].project_id;//获取产品id
		    let goods_title=that.title;//获取产品标题
		    // let goods_img=that.selectSku.img;//产品图片
			  if (res.from === 'button') {
			     // 来自页面内转发按钮
			 	  return {
			 		 title: goods_title,
					 path: `/pages/shop/projectInfo?peoject_id=${peoject_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_project_id=${peoject_id}`,
			 		 // imageUrl:goods_img //不设置则默认为当前页面的截图
			 	   }
			   }
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad(option) {
			this.orderid = option.id
			// 商品 1  项目2
			this.orderType = option.type
			this.is_singles = option.is_single
			this.getOrders()
		},
		methods: {
			// 保存
			downloadFile() {
				uni.downloadFile({
					url: this.orderType == 1 ? this.oderlist.goods[0].goods_images : this.oderlist.project[0].project_images,//图片地址
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => { 
				                this.toast('保存成功')
				            },
							fail: (res) => { 
								this.toast('保存失败')
				            }
						})
					}
				})
			},
			guideToTimelineShare() {
			    uni.showModal({
			      title: '提示',
			      content: '请点击右上角菜单，选择"分享到朋友圈"',
			      showCancel: false
			    })
			},
			toProject(item) {
				console.log(454, item)
				this.utlis.goUrl(`/pages/shop/projectInfo?peoject_id=${item.project.id}&type=${item.project.relation_id > 0 ? 1 : 0}`)
			},
			toShop(ele) {
				this.utlis.goUrl(`/pages/shop/shopInfo?goods_id=${ele.id}`)
			},
			async shareFun() {
				let {code,data} = await this.$u.api.getOrderQr({
					id: this.orderType == 1 ? this.oderlist.goods[0].id : this.oderlist.project[0].project_id,
					type: this.orderType == 1 ? 2 : 1
				});
				if(code){
					this.showPopup = true
					this.QRImg = data
				}
			},
			// 保存分享记录
			async setUserShare(){
				if (this.orderType == 1) await this.$u.api.setUserShare({goods_id:this.oderlist.goods[0].id});
				if (this.orderType == 2) await this.$u.api.setUserShare({project_id:this.oderlist.project[0].project_id});
			},
			async getOrders(){
				let {data,code} = await this.$u.api.getOrders({id: this.orderid});
				if(code){
					if (data.project) this.orderType = 2
					if (data.goods && data.goods.length > 0) this.orderType = 1
					console.log(34, this.orderType)
					data.project.forEach(item =>{
						if(item.project.tags) item.project.tags = item.project.tags.split(',')
					})
					this.oderlist = data
				}
			},
			// 查看二维码
			look(){
				uni.navigateTo({
					url:`/pages/order/QRCode?order_id=${this.order_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	width: 100%;
	height: 100%;
	background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	background-repeat: no-repeat;
	background-size: cover;
	.content{
		&-header{
			display: flex;
			margin-top: 46rpx;
			image{
				width: 53rpx;
				height: 53rpx;
				margin-right: 10rpx;
			}
			.tag{
				font-size: 42rpx;
				color: #333;
			}
		}
		&-dec{
			margin-top: 23rpx;
			font-size: 24rpx;
			color: #4D5562;
		}
		.contentBox{
			padding: 24rpx;
			background: white;
			margin-top: 32rpx;
			border-radius: 8rpx;
			// padding-bottom: 260rpx;
			// margin-bottom: 260rpx;
			.goods{
				display: flex;
				background: #ffffff;
				border-radius: 20rpx;
				// padding: 24rpx;
				position: relative;
				margin-bottom: 20rpx;
				image{
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx;
				}
				>view{
					flex: 1;
					margin-left: 20rpx;
				}
				.cuoClose{
					position: absolute;
					bottom: 20rpx;
					right: 0rpx;
					font-size: 32rpx;
					color: #999999;
					u-icon{
						position: relative;
						top: -4rpx;
						margin-right: 10rpx;
					}
				}
				.t1{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					text-align: left;
					color: #1D2129;
					line-height: 37rpx;
					width: 100%;
					white-space:nowrap; 
					overflow:hidden; 
					text-overflow:ellipsis;
					text{
						font-size: 20rpx;
						font-weight: 400;
						text-align: right;
						color: #999999;
						line-height: 28rpx;
					}
				}
				.tt{
					margin: 10rpx 0;
					view{
						display: inline-block;
						padding: 7rpx 12rpx;
						color: #E8C778;
						border: 1rpx solid #E8C778;
						font-size: 16rpx;
						margin-right: 20rpx;
					}
				}
				.t2{
					display: inline-block;
					padding: 5rpx 8rpx;
					border-radius: 6rpx;
					color: #E8BC88;
					font-size: 16rpx;
					text-align: center;
					background: linear-gradient(135deg, #2D3039 0%, #495057);
					margin-right: 15rpx;
					
					image{
						width: 16rpx;
						height: 16rpx;
						position: relative;
						top: 3rpx;
						margin-right: 10rpx;
					}
				}
				.price{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					text{
						font-size: 32rpx;
						font-weight: 400;
						color: #007664;
						text-align: right;
						line-height: 33rpx;
						letter-spacing: 1px;
						.text{
							font-size: 26rpx;
						}
					}
					.make{
						font-size: 24rpx;
						font-weight: 400;
						color: #007664;
						line-height: 33rpx;
						letter-spacing: 1px;
						margin-right: 18rpx;
					}
					.buy{
						width: 93rpx;
						height: 49rpx;
						background: #d5bc81;
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						text-align: center;
						color: #ffffff;
						line-height: 49rpx;
						letter-spacing: 1px;
					}
				}
			}
			.qr{
				text-align: center;
				margin-top: 30rpx;
				image{
					width: 375rpx;
					height: 375rpx;
				}
				&-dec{
					font-size: 24rpx;
					color: #4D5562;
					margin-bottom: 30rpx;
					u-icon{
						margin-left: 20rpx;
						position: relative;
						top: 3rpx;
					}
				}
			}
		}
	}
	.sure{
		width: 670rpx;
		line-height: 100rpx;
		background: linear-gradient(140deg, #50DCC2 0%, #007664);
		border-radius: 48rpx;
		text-align: center;
		position: fixed;
		bottom: 116rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-size: 32rpx;
	}
}
.u-icon{
	color: #000 !important;
}
.popBox{
	background-color: transparent !important;
	&-bg{
		width: 616rpx;
		height: 937rpx;
		background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shareBg22.png');
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 50rpx;
		position: relative;
		&-box{
			width: 90%;
			position: absolute;
			bottom: 30rpx;
			
			display: flex;
			margin: 30rpx 28rpx 0 28rpx;
			&-left{
				flex: 1;
				.title{
					font-size: 32rpx;
					color: #4D5562;
				}
				.dec{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			&-right{
				image{
					width: 111rpx;
					height: 111rpx;
				}
			}
		}
		.goods-box{
			width: 100%;
			padding-top: 100rpx;
			padding-left: 28rpx;
			padding-right: 28rpx;
			.goods{
				display: flex;
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				position: relative;
				image{
					width: 188rpx;
					height: 188rpx;
					border-radius: 8rpx;
				}
				>view{
					flex: 1;
					margin-left: 20rpx;
				}
				.cuoClose{
					position: absolute;
					bottom: 20rpx;
					right: 0rpx;
					font-size: 32rpx;
					color: #999999;
					u-icon{
						position: relative;
						top: -4rpx;
						margin-right: 10rpx;
					}
				}
				.t1{
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					text-align: left;
					color: #1D2129;
					line-height: 37rpx;
					width: 100%;
					white-space:nowrap; 
					overflow:hidden; 
					text-overflow:ellipsis;
					text{
						font-size: 20rpx;
						font-weight: 400;
						text-align: right;
						color: #999999;
						line-height: 28rpx;
					}
				}
				.tt{
					margin: 10rpx 0;
					view{
						display: inline-block;
						padding: 7rpx 12rpx;
						color: #E8C778;
						border: 1rpx solid #E8C778;
						font-size: 16rpx;
						margin-right: 20rpx;
					}
				}
				.t2{
					display: inline-block;
					padding: 5rpx 8rpx;
					border-radius: 6rpx;
					color: #E8BC88;
					font-size: 16rpx;
					text-align: center;
					background: linear-gradient(135deg, #2D3039 0%, #495057);
					margin-right: 15rpx;
					
					image{
						width: 16rpx;
						height: 16rpx;
						position: relative;
						top: 3rpx;
						margin-right: 10rpx;
					}
				}
				.price{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					text{
						font-size: 32rpx;
						font-weight: 400;
						color: #007664;
						text-align: right;
						line-height: 33rpx;
						letter-spacing: 1px;
						.text{
							font-size: 26rpx;
						}
					}
					.make{
						font-size: 24rpx;
						font-weight: 400;
						color: #007664;
						line-height: 33rpx;
						letter-spacing: 1px;
						margin-right: 18rpx;
					}
					.buy{
						width: 93rpx;
						height: 49rpx;
						background: #d5bc81;
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						text-align: center;
						color: #ffffff;
						line-height: 49rpx;
						letter-spacing: 1px;
					}
				}
			}
		}
		.goods-store{
			display: flex;
			flex: 1;
			padding: 32rpx;
			&-view{
				display: flex;
				flex: 1;
				image{
					width: 103rpx;
					height: 84rpx;
				}
				.main{
					margin-left: 10rpx;
					&-title{
						font-size: 36rpx;
						color: #333333;
						width: 150rpx;
						white-space:nowrap; 
						overflow:hidden; 
						text-overflow:ellipsis;
					}
					&-dec{
						font-size: 20rpx;
						color: #4D5562;
						margin-top: 10rpx;
					}
				}
			}
		}
		&-time{
			width: 552rpx;
			height: 44rpx;
			background: rgba(243,244,243,0.55);
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			font-size: 24rpx;
			color: #4D5562;
			text-align: center;
			line-height: 44rpx;
			margin: 30rpx auto 0;
		}
		&-staff{
			display: flex;
			padding-top: 120rpx;
			padding-left: 28rpx;
			image{
				width: 87rpx;
				height: 87rpx;
				border-radius: 45%;
				margin-right: 20rpx;
			}
			&-view{
				.ttile{
					font-size: 28rpx;
					color: #333333;
					margin-left: 20rpx;
				}
				.dec{
					font-size: 24rpx;
					color: #4D5562;
					margin-top: 20rpx;
				}
			}
		}
	}
	.shareF{
		background-color: transparent !important;
		text-align: center;
		&-title{
			width: 237rpx;
			height: 24rpx;
			margin: 65rpx 0 52rpx 0;
		}
		&-view{
			display: flex;
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;
			view{
				flex: 1;
				text-align: center;
				image{
					width: 100rpx;
					height: 144rpx;
				}
			}
		}
	}
}

.plsTitle{
	font-size: 28rpx;
	color: #242833;
	line-height: 26rpx;
	margin-bottom: 32rpx;
	margin-top: 32rpx;
	font-weight: bold;
	image{
		width: 9rpx;
		height: 29rpx;
		position: relative;
		top: 5rpx;
		margin-right: 12rpx;
	}
}
.groupList{
	padding: 0 32rpx 4rpx 32rpx;
	border-radius: 8rpx;
	margin-top: 20rpx;
	background-color: #FFFFFF;
	margin-bottom: 260rpx;
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		border-bottom: 1rpx solid #ededed;
		font-size: 24rpx;
		color: #333333;
		.tit{
			font-size: 26rpx;
		}
	}
	.list:last-child{
		border-bottom: 1rpx solid #FFFFFF;
	}
}


::v-deep .u-mode-center-box{
	background-color: transparent !important;
}
.sharebtn{
	margin: 0;
	padding: 0;
	background: transparent;
}
</style>
